// 页面上的所有的资源都加载完毕了 就是触发
// js引用 css 图片
onload = function() {
  changeHeader();
  timeGo();
  jdSlides();
  function changeHeader() {
    /* 
    1 初步分析
      1 rgba a 的改变 就是透明度的改变  背景透明
      2 页面滚动事件   onscroll 
      3 页面上滚动的高度 和 透明度产生一些联系 
        1 页面滚动的时候 只在轮播图高度的区间内有变化 超过轮播图的高度 
            透明度就已经到最大值。。
        2 模拟
          1 当 scrollTop =0 透明度 = 0
          2 当 scrollTop = 轮播图的高度时候  透明度 = 1 
          3 但是 透明度 最大 就是 0.9 
    2 代码步骤
      1 先获取dom元素
      2 绑定页面滚动事件
      3 获取页面往上滚动的值 
      4 把透明度设置到标签中
     */

    //  1 获取dom元素
    var header = document.querySelector("header");
    // 1.5 获取轮播图的高度
    var slidesHeight = document.querySelector(".slides img").offsetHeight;
    //  2 绑定页面滚动事件
    window.onscroll = function() {
      var scrollTop =
        document.documentElement.scrollTop ||
        window.pageYOffset ||
        document.body.scrollTop;
      // console.log(scrollTop);

      // 透明度
      var tmpOpa = scrollTop / slidesHeight;
      // 判断 tmpOPa不能超过 0.9
      if (tmpOpa > 0.9) {
        tmpOpa = 0.9;
      }
      // console.log(tmpOpa);

      header.style.backgroundColor = "rgba(201, 21, 35, " + tmpOpa + ")";
    };
  }

  function timeGo() {
    /* 
    1 定倒计时的总时间 5个小时  秒单位  5*60*60 
    2 开启倒计时
      1 time--
      2 实时把时间打印标签上
      3 时间到期了 
        1 清除定时器
        2 触发时间到了的逻辑
     */

    //  0 获取时间标签
    var spans = document.querySelectorAll(".timer>span");

    //  1 倒计时的总时间 单位 s 秒
    var times = 5 * 60 * 60;
    // var times=60;

    setTime();

    // 2 开启定时器
    var timeId = setInterval(function() {
      // 3 时间减少
      times--;

      setTime();

      // 时间到了 清除定时器
      if (times === 0) {
        clearInterval(timeId);

        console.log("恭喜你 奖被抢完 ");
      }
    }, 1000);

    // 封装根据时间动态设置标签
    function setTime() {
      var hour = parseInt(times / 60 / 60);
      var minutes = parseInt(times / 60 - hour * 60);
      var seconds = times - hour * 60 * 60 - minutes * 60;
      // console.log(hour,minutes,seconds);// 4:57:9 =>  04:58:09

      // 1 写if else 判断。。。
      // 2 运用小学数学 9年义务教育

      // 获取小时里面的第一位数 04:58:19 中 0

      // 4/10=0.4 14/10=1.4
      var hour0 = parseInt(hour / 10);
      // 取余 取模
      // 4%10 = 4 14%10=4
      var hour1 = hour % 10;
      // console.log(hour0,hour1);

      var minutes0 = parseInt(minutes / 10);

      var minutes1 = minutes % 10;
      var seconds0 = parseInt(seconds / 10);
      var seconds1 = seconds % 10;
      // console.log(hour0,hour1,minutes0,minutes1,seconds0,seconds1);

      // 赋值到标签中
      spans[0].innerHTML = hour0;
      spans[1].innerHTML = hour1;

      spans[3].innerHTML = minutes0;
      spans[4].innerHTML = minutes1;

      spans[6].innerHTML = seconds0;
      spans[7].innerHTML = seconds1;
    }
  }

  function jdSlides() {
    var swiper_ul = document.querySelector(".slides_ul");
    var index = 1;
    var lis = document.querySelectorAll(".indexer>li");
    // 9
    var lastIndex = swiper_ul.childElementCount - 1;

    swiper_ul.style.transform = "translateX(-" + index + "0%)";
    var timeId = go();

    itcast(".slides_ul").swipe(function (d) {
      clearInterval(timeId);
      if (index == 9) {
        index = 1;
        swiper_ul.style.transition = "none";
        swiper_ul.style.transform = "translateX(-" + index + "0%)";
        swiper_ul.offsetHeight;
      }else if(index==0){
        index = 8;
        swiper_ul.style.transition = "none";
        swiper_ul.style.transform = "translateX(-" + index + "0%)";
        swiper_ul.offsetHeight;
      }


     
      if (d == "left") {
        index++;
        swiper_ul.style.transition = "transform .3s";
        swiper_ul.style.transform = "translateX(-" + index + "0%)";
      } else if (d == "right") {
        index--;
        swiper_ul.style.transition = "transform .3s";
        swiper_ul.style.transform = "translateX(-" + index + "0%)";
      }
      activeLi(index);
      timeId = go();
    })

    function activeLi(tmpIndex) {
      if(tmpIndex==9){
        tmpIndex=1;
      }else if(tmpIndex==0){
        tmpIndex=8;
      }
      tmpIndex--;


      for (var i = 0; i < lis.length; i++) {
        var li = lis[i];
        //  移除class active
        li.classList.remove("active");
      }

      // 激活某个li标签
      lis[tmpIndex].classList.add("active");
    }

    function go(params) {
      return setInterval(() => {
        if (index == 9) {
          index = 1;
          swiper_ul.style.transition = "none";
          swiper_ul.style.transform = "translateX(-" + index + "0%)";
          swiper_ul.offsetHeight;
        }

        index++;
        swiper_ul.style.transition = "transform .3s";
        swiper_ul.style.transform = "translateX(-" + index + "0%)";
        activeLi(index);
      }, 1000);
    }
  }
};
